/* eslint-disable */

<!--表格组件 -->
<template>
  <section class="cy-table-page">
    <!-- 表格操作按钮 -->
    <section v-if="tableHandles.length>0" class="cy-handle">
      <el-button v-for="(item,index) in tableHandles" v-show="!(item.isHide && item.isHide(item))" :key="index" :size="item.size || size" :type="item.type" @click="item.handle($refs.cyTable.selection)&&item.handle "><i v-if="item.icon" class="iconfont" :class="item.icon" /> {{ item.label }}</el-button>
    </section>
    <!-- 数据表格 -->
    <section class="cy-table">
      <el-table
        ref="cyTable"
        v-loading="loading"
        :tree-props="treeProps"
        :row-key="rowKey"
        :stripe="stripe"
        :header-cell-style="{background:`${theme==='dark'?'#212126':'#FAFAFA'}`}"
        :element-loading-background="`${theme==='dark'?'rgba(0, 0, 0, 0.7)':'rgba(255, 255, 255, 0.7)'}`"
        :data="tableData"
        :size="size"
        :max-height="maxHeight"
        :border="isBorder"
        :span-method="objectSpanMethod"
        :default-selections="defaultSelections"
        @selection-change="handleSelectionChange"
        @select-all="selectAll"
      >
        <el-table-column v-if="isSelection" type="selection" :reserve-selection="reserveSelection" :selectable="checkSelectable" align="center" fixed />
        <el-table-column v-if="isIndex" type="index" fixed :label="indexLabel" align="center" width="50" />
        <!-- 数据栏 -->
        <el-table-column v-for="(item,key) in tableCols" :key="key" :prop="item.prop" :label="item.label" :width="item.width" :header-align="item.headerAlign" :align="item.align || 'center'" :render-header="item.require?renderHeader:null" :fixed="item.fixed" :show-overflow-tooltip="item.showOverflowTooltip||false">
          <template slot-scope="scope">
            <span />
            <!-- html -->
            <el-popover v-if="item.type==='Popover'" effect="dark" trigger="hover" placement="top">
              {{ item.html(scope.row) }}
              <div slot="reference" class="name-wrapper">
                {{ item.html(scope.row).substring(0, 100) }}
              </div>
            </el-popover>
            <!-- html -->
            <span v-if="item.type==='Html'" v-html="item.html(scope.row)" />
            <!-- 按钮 -->
            <div v-if="item.type==='Button'">
              <el-button v-for="(btn,index) in item.btnList" v-if="!(btn.isHide && btn.isHide(scope.row))" :key="index" :disabled="btn.isDisabled && btn.isDisabled(scope.row)" :get-info="btn.getInfo && btn.getInfo((scope.row))" :type="btn.type" :style="btn.style" :size="btn.size || size" @click="btn.handle(scope.row)"><i v-if="btn.icon" :class="btn.icon" style="margin-right:3px" />{{ btn.labelTxt?btn.labelRow(scope.row):btn.label }}</el-button>
              <el-dropdown v-if="item.dropdown&&dropdownShow(item.dropdown,scope.row)" size="medium" @command="handleCommand">
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(dropdown,downIndex) in item.dropdown" v-show="!(dropdown.isHide && dropdown.isHide(scope.row))" :key="downIndex" :command="{...scope.row,...dropdown}">{{ dropdown.label }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </div>
            <!-- 输入框 -->
            <el-input v-if="item.type==='Input'" v-model="scope.row[item.prop]" :size="item.size||size" :disabled="item.isDisabled && item.isDisabled(scope.row)" @focus="item.focus && item.focus(scope.row)" />
            <!-- 下拉框 -->
            <el-select v-if="item.type==='Select'" v-model="scope.row[item.prop]" :size="item.size||size" :props="item.props" :disabled="item.isDisabled && item.isDisabled(scope.row)" @change="item.change && item.change(scope.row)">
              <el-option v-for="op in item.options" :key="op[item.props.value]" :label="op[item.props.label]" :value="op[item.props.value]" />
            </el-select>
            <!-- 单选 -->
            <el-radio-group v-if="item.type==='Radio'" v-model="scope.row[item.prop]" :disabled="item.isDisabled && item.isDisabled(scope.row)" @change="item.change && item.change(scope.row)">
              <el-radio v-for="(ra,index) in item.radios" :key="index" :label="ra.value">{{ ra.label }}</el-radio>
            </el-radio-group>
            <!-- 复选框 -->
            <el-checkbox-group v-if="item.type==='Checkbox'" v-model="scope.row[item.prop]" :disabled="item.isDisabled && item.isDisabled(scope.row)" @change="item.change && item.change(scope.row)">
              <el-checkbox v-for="(ra,index) in item.checkboxs" :key="index" :label="ra.value">{{ ra.label }}</el-checkbox>
            </el-checkbox-group>
            <!-- 评价 -->
            <el-rate v-if="item.type==='Rate'" v-model="scope.row[item.prop]" :disabled="item.isDisabled && item.isDisabled(scope.row)" @change="item.change && item.change(scope.row)" />
            <!-- 开关 -->
            <el-switch v-if="item.type==='Switch'" v-model="scope.row[item.prop]" :disabled="item.isDisabled && item.isDisabled(scope.row)" @change="item.change && item.change(scope.row)" />
            <!-- 图像 -->
            <img v-if="item.type==='Image'" :src="scope.row[item.prop]" @click="item.handle && item.handle(scope.row)">
            <!-- 滑块 -->
            <el-slider v-if="item.type==='Slider'" v-model="scope.row[item.prop]" :disabled="item.isDisabled && item.isDisabled(scope.row)" @change="item.change && item.change(scope.row)" />
            <!-- 默认 -->
            <span v-if="!item.type" :style="item.itemStyle && item.itemStyle(scope.row)" :class="item.itemClass && item.item.itemClass(scope.row)">{{ (item.formatter && item.formatter(scope.row)) || scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <!-- 分页 -->
    <section v-if="isPagination && pagination.total>0" class="cy-pagination">
      <el-pagination :background="pagination.background" :layout="pagination.layout||'total, sizes, prev, pager, next, jumper'" :page-size="pagination.pageSize" :current-page="pagination.pageIndex" :total="pagination.total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    </section>
  </section>
</template>

<script>
export default {
  props: {
    // 表格型号：mini,medium,small
    size: { type: String, default: 'medium' },
    isBorder: { type: Boolean, default: false },
    loading: { type: Boolean, default: false },
    // 表格操作
    isHandle: { type: Boolean, default: false },
    tableHandles: { type: Array, default: () => [] },
    // 斑马线
    stripe: { type: Boolean, default: false },
    reserveSelection: { type: Boolean, default: false },
    // 最大高度
    maxHeight: { type: String, default: 'auto' },
    // 表格数据
    tableData: { type: Array, default: () => [] },
    // 表格列配置
    tableCols: { type: Array, default: () => [] },
    // 是否显示表格复选框
    isSelection: { type: Boolean, default: false },
    defaultSelections: { type: [Array, Object], default: () => null },
    // 是否显示表格索引
    isIndex: { type: Boolean, default: false },
    indexLabel: { type: String, default: '序号' },
    // 是否显示分页
    isPagination: { type: Boolean, default: true },
    // 分页数据
    pagination: {
      type: Object,
      default: () => ({ background: true, pageSize: 10, pageIndex: 1, total: 0, layout: 'total, sizes, prev, pager, next, jumper' })
    },
    treeProps: {
      type: Object,
      default: () => ({ })
    },
    // 通过值判断 CheckBox 是否可以勾选
    isCheckSelect: { type: String, default: null },
    setSpanMethod: {
      type: Function,
      default: () => {}
    },
    rowKey: { type: String, default: 'id' }
  },
  data() {
    return {}
  },
  computed: {
    theme() {
      return this.$store.state.app.theme
    }
  },
  watch: {
    theme() {
      return this.theme
    },
    defaultSelections(val) {
      this.$nextTick(function() {
        if (Array.isArray(val)) {
          val.forEach(row => {
            this.$refs.cyTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.cyTable.toggleRowSelection(val)
        }
      })
    }
  },
  mounted() {
    // 表格默认勾选
    this.tableData.forEach(item => {
      if (item.checkbox) {
        this.$refs.cyTable.toggleRowSelection(item)
      }
    })
  },
  methods: {
    dropdownShow(dropdownList, row) {
      if (!dropdownList) return
      const showList = dropdownList.filter(item => {
        return !item.isHide(row)
      })
      return showList.length
    },
    // 表格勾选
    handleSelectionChange(rows) {
      this.$emit('select', rows)
    },
    // 全选
    selectAll(rows) {
      this.$emit('select', rows)
    },
    //
    handleCurrentChange(val) {
      this.pagination.pageIndex = val
      // if (this.pagination.total > val * (this.pagination.pageSize - 1)) {
      //   this.$emit('pageChange', this.pagination)
      // }
      this.$emit('pageChange', this.pagination)
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.$emit('pageChange', this.pagination)
    },

    // tableRowClassName({rowIndex}) {
    //     if (rowIndex % 2 === 0) {
    //         return "stripe-row";
    //     }
    //     return "";
    // }
    renderHeader(h, obj) {
      return h('span', { class: 'cy-table-require' }, obj.column.label)
    },
    handleCommand(val) {
      if (val.handle) {
        val.handle(val)
      }
    },
    checkSelectable(row) {
      return this.isCheckSelect ? !row[this.isCheckSelect] : true
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      return this.setSpanMethod(row, column, rowIndex, columnIndex)
    }
  }
}
</script>
<style lang="scss" scoped>
.cy-table-page {
  display: flex;
  flex-direction: column;
  padding: 0 32px;
  margin-top: 24px;
}
.cy-table-require::before {
  content: "*";
  color: red;
}
.cy-pagination {
  height: 45px;
  text-align: right;
  padding-top: 10px;
}
.cy-handle {
  text-align: right;
  min-height: 30px;
  .iconfont {
    font-size: 14px;
  }
}

.el-dropdown-link {
  color: #1890FF;
  margin-left: 10px;
  cursor: pointer;
}
button {
  display: inline-block;
}
.el-select {max-width: 300px;}
</style>
